 
import { SmileOutlined } from '@ant-design/icons'
import Case1 from '../pages/json2ts/json2ts'
import Case2 from '../pages/case2/case2'
import { FC, LazyExoticComponent, ReactNode, lazy } from 'react'
import { MenuItemProps} from 'antd'
import { MenuItemType } from 'antd/es/menu/hooks/useItems'
import { ItemType } from 'antd/lib/menu/hooks/useItems'
import Base64Tool from '../pages/base64/base64'
import TimestampTool from '../pages/timestamp/timestamp'
import JsonViewTool from '../pages/jsonview/jsonview'
import About from '../pages/about/about'
import Json2Ts from '../pages/json2ts/json2ts'
 
const routes:Array<RouteItem> = [
  {
    path: '/codec/timestamp',
    label: '时间戳转换',
    element: <TimestampTool />,
    icon: <SmileOutlined rev={undefined} />,
  },
  {
    path: '/codec/base64',
    label: 'Base64编码',
    element: <Base64Tool />,
    icon: <SmileOutlined rev={undefined} />,
  },
  {
    path: '/codec/jsonview',
    label: 'JSON查看器',
    element: <JsonViewTool />,
    icon: <SmileOutlined rev={undefined} />,
  },
    {
    path: '/codec/json2ts',
    label: 'JSON转TS',
    element: <Json2Ts />,
    icon: <SmileOutlined rev={undefined} />,
  },
  {
    path: '/示例',
    label: '关于',
    element: <About />,

    icon: <SmileOutlined rev={undefined} />,
 
    
  },  
]
type RouteItem = {path:string,element?:ReactNode|LazyExoticComponent<FC<{}>>,label:string,icon:ReactNode,children?:Array<RouteItem>}

function formatChild(parentKey:string,child: RouteItem):ItemType<MenuItemType>{
    let childs:ItemType<MenuItemType>[]|null = null
    if(child?.children){
        childs = child.children.map(item=>{
           return  formatChild(parentKey + '/' + child.path,item)
        })
    }
    let dd = {
        label: child.label,
        key: parentKey + '/' + child.path,
        icon: child.icon,
        children: childs ? childs : null
      }
      
    return  dd;
}
 
function mapItems(items: ItemType<MenuItemType>[] ,routes:Array<RouteItem>):ItemType<MenuItemType>[] {
    for(let item of routes){
        let itemChld:ItemType<MenuItemType>[]|null = null
        if(item?.children){ 
            itemChld = item?.children.map(x=>{ return formatChild(item.path,x) }) 
        }
        let menuItem:MenuItemType = {
            label: item.label,
            key: item.path,
            icon: item.icon,
            //@ts-ignore
            children: itemChld ,
          }

        items.push(menuItem as MenuItemType)
    }
    return items
   
}
let tmpItems: ItemType<MenuItemType>[]  = mapItems([], routes)
console.log('tmpItemstmpItems',tmpItems)
export const menuItems = tmpItems
 
export default routes